import React, { useEffect, useState } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Input } from '@nutui/nutui-react'
import { Button, Space } from 'antd-mobile'
import { Stepper, Cell, Dialog } from 'react-vant'
import { TextArea, Popover, Toast } from 'antd-mobile'
import {
    AppstoreOutline,
    // AntOutline,
    HandPayCircleOutline,
    ScanningOutline,
    TransportQRcodeOutline,
} from 'antd-mobile-icons'
// import { useNavigate, useSearchParams } from 'react-router-dom'
import axios from 'axios'
import { light } from '@mui/material/styles/createPalette'
export default function Uf() {
    let [search] = useSearchParams()
    let navigate = useNavigate()
    let [info, setInfo] = useState({})
    const actions = [
        { key: 'scan', icon: <AppstoreOutline />, text: '每日一次' },
        { key: 'payment', icon: <AppstoreOutline />, text: '每日两次' },
        { key: 'bus', icon: <AppstoreOutline />, text: '每日三次' },
        { key: 'assistant', icon: <AppstoreOutline />, text: '每日四次' },
    ]
    let id = search.get('id')
    useEffect(() => {
        getinfos()
    }, [id])
    // console.log(id);
    const getinfos = async () => {
        let { data: { data } } = await axios.get('http://127.0.0.1:3000/mxd_infoidy', { params: { id } })
        console.log(data);
        setInfo(data)
        setValue9(data.nums)

    }
    const [value9, setValue9] = useState(0)
    let top = () => {
        navigate(-1)
    }

    let bc=async()=>{
        // console.log(info);
       let nums=value9
       let id=info._id
        console.log(nums,'6120');
        let {data}=await axios.post('http://127.0.0.1:3000/mxd_updatecfy',{id:id,nums:nums})
        console.log(data);
        // navigate(-1)
    }
    return (
        <div id='uf'>
            <div className="top">
                <p>
                    <span>
                        <svg onClick={top} style={{ width: '30px', height: '35px', position: 'absolute', marginLeft: '5px' }} t="1724675809513" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2590" width="200" height="200"><path d="M670.6 861.6c-7.6 0-15.1-2.9-20.9-8.6L329.4 532.7c-11.6-11.5-11.6-30.3 0-41.8l320.2-320.2c5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6 11.5 11.5 11.5 30.2 0 41.8L392 511.8l299.4 299.4c11.5 11.6 11.5 30.3 0 41.8-5.7 5.7-13.3 8.6-20.8 8.6z" fill="#2c2c2c" p-id="2591"></path></svg>
                    </span>
                    <span style={{ marginLeft: '35px', marginTop: '10px', lineHeight: '33px', fontSize: '20px' }}>用法用量</span>

                </p>
                <hr />
            </div>
            <div className="top2">
                <div className="img">
                    <img src={info.img} alt="" />
                </div>
                <div className="tx">
                    <Button className='btn2' size='mini' shape='rounded' style={{ backgroundColor: '#DA2222', color: 'white' }} fill='solid'>
                        Rx
                    </Button>
                    <p style={{ marginLeft: '50px', marginTop: '20px' }}>【代名】{info.name}</p>
                    <p style={{ marginLeft: '50px', marginTop: '10px' }}>{info.grade}</p>
                    <p style={{ marginLeft: '50px', marginTop: '10px' }}>北京诺华制药有限公司</p>

                </div>

            </div>
            <div className="news">
                <p style={{ height: '50px', marginLeft: '20px', marginTop: '10px', marginBottom: '20px' }}>数量
                    <span style={{ marginLeft: '180px' }}>
                        <Stepper
                            min={0}
                            value={value9}
                            onChange={v => {
                                setValue9(v)
                            }}
                        />
                    </span>
                </p>
                <p style={{ height: '50px', marginLeft: '20px' }}>
                    <span>用药效率</span>
                    <span style={{ marginLeft: '150px' }}>请选择用药频率</span>
                    <Popover.Menu
                        actions={actions}
                        //   placement='bottom-start'
                        onAction={node => Toast.show(`选择了 ${node.text}`)}
                        trigger='click'
                    >
                        <svg t="1725438122963" style={{ height: '20px', width: '30px', marginLeft: '10px', position: 'absolute' }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2563" width="200" height="200"><path d="M325.399273 235.124364L600.157091 488.727273 325.399273 742.353455a34.909091 34.909091 0 1 0 47.36 51.316363l302.545454-279.272727a34.909091 34.909091 0 0 0 0-51.316364l-302.545454-279.272727a34.909091 34.909091 0 1 0-47.36 51.316364" fill="#2c2c2c" p-id="2564"></path></svg>
                    </Popover.Menu>
                </p>

                <p style={{ height: '50px', marginLeft: '20px' }}>
                    <span>单次用量</span>
                    <span style={{ marginLeft: '150px' }}>请输入数量</span>
                    <svg t="1725438122963" style={{ height: '20px', width: '30px', marginLeft: '40px', position: 'absolute' }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2563" width="200" height="200"><path d="M325.399273 235.124364L600.157091 488.727273 325.399273 742.353455a34.909091 34.909091 0 1 0 47.36 51.316363l302.545454-279.272727a34.909091 34.909091 0 0 0 0-51.316364l-302.545454-279.272727a34.909091 34.909091 0 1 0-47.36 51.316364" fill="#2c2c2c" p-id="2564"></path></svg>

                </p>
                <p style={{ height: '50px', marginLeft: '20px' }}>
                    <span>用药方法</span>
                    <span style={{ marginLeft: '150px' }}>请选择</span>
                    <svg t="1725438122963" style={{ height: '20px', width: '30px', marginLeft: '10px', position: 'absolute' }} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2563" width="200" height="200"><path d="M325.399273 235.124364L600.157091 488.727273 325.399273 742.353455a34.909091 34.909091 0 1 0 47.36 51.316363l302.545454-279.272727a34.909091 34.909091 0 0 0 0-51.316364l-302.545454-279.272727a34.909091 34.909091 0 1 0-47.36 51.316364" fill="#2c2c2c" p-id="2564"></path></svg>

                </p>
                <p style={{ height: '50px', marginLeft: '20px' }}>
                    <span>补充说明（选填）</span>
                </p>
                <TextArea style={{ marginLeft: '20px', width: '90%' }}
                    defaultValue={'请输入...'}
                    showCount
                    maxLength={30}
                />
                <Button onClick={bc} style={{ width: '300px', marginLeft: '45px', marginTop: '20px' }} shape='rounded' color='primary'>
                    保存
                </Button>
            </div>

        </div>
    )
}
